<template>
    <div>
        <el-card>
            <div class="handleBtn">
                <el-button icon="el-icon-position" @click="submitHandle()">发送</el-button>
                <div>目前共采集 <span>{{ total }}</span> 条数据,已选择 <span>{{ selectNum }}</span> 条数据</div>
            </div>
            <el-table :data="tableList" border height="680" @selection-change="selectHandle"
                :header-cell-style="{ background: '#409EFF', color: '#FFF' }">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column label="负责人id" prop="openId" width="120"></el-table-column>
                <el-table-column label="姓名" prop="userName" width="120"></el-table-column>
                <el-table-column label="使用前">
                    <template slot-scope="scope">
                        <el-image style="width: 50px;height: 50px" :src="scope.row.beforeImg" fit="cover"
                            :previewSrcList="[
                                scope.row.beforeImg
                            ]" v-if="scope.row.isHaveBeforeImg"></el-image>
                        <el-tag v-else>暂未上传</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="数值1" prop="figure1"></el-table-column>
                <el-table-column label="数值2" prop="figure1"></el-table-column>
                <el-table-column label="数值3" prop="figure3"></el-table-column>
                <el-table-column label="使用后">
                    <template slot-scope="scope">
                        <el-image style="width: 50px;height: 50px" :src="scope.row.afterImg" fit="cover"
                            :previewSrcList="[
                                scope.row.afterImg
                            ]" v-if="scope.row.isHaveAfterImg"></el-image>
                        <el-tag v-else>暂未上传</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="数值1" prop="figure4"></el-table-column>
                <el-table-column label="数值2" prop="figure5"></el-table-column>
                <el-table-column label="数值3" prop="figure6"></el-table-column>

            </el-table>
        </el-card>

    </div>
</template>

<script>

import {
    toSendSentence, getCheck
} from '../network/jiang';

export default {
    data() {
        return {

            path: 'https://zbz-imgs.oss-cn-beijing.aliyuncs.com/',
            tableList: [
                {
                    userName: '宋家华'
                },
                {
                    userName: '李可岩'
                },
            ],
            selectArr: [],
            path: '',
            addDia: false,
            form: {
                userName: '',
                beforeImg: '',
                afterImg: ''
            },
            beforeImgUrl: '',
            afterImgUrl: '',
            total: 0,
            selectNum: 0

        };
    },
    methods: {

        getList() {
            getCheck({
                // openId: '
            }).then(res => {
                if (res.flag) {
                    res.data.reverse()
                    console.log(res.data);
                    this.tableList = []
                    this.total = res.data.length
                    res.data.forEach(item => {
                        this.tableList.push({
                            checkId: item.checkId,
                            userName: item.userName,
                            beforeImg: 'https://zbz-imgs.oss-cn-beijing.aliyuncs.com/check1/' + item.newPrint,
                            afterImg: 'https://zbz-imgs.oss-cn-beijing.aliyuncs.com/check2/' + item.oldPrint,
                            openId: item.openId,
                            isHaveBeforeImg: item.newPrint != null,
                            isHaveAfterImg: item.oldPrint != null,
                            figure1: item.figure1 != 'undefined' ? item.figure1 : '',
                            figure2: item.figure2 != 'undefined' ? item.figure2 : '',
                            figure3: item.figure3 != 'undefined' ? item.figure3 : '',
                            figure4: item.figure4 != 'undefined' ? item.figure4 : '',
                            figure5: item.figure5 != 'undefined' ? item.figure5 : '',
                            figure6: item.figure6 != 'undefined' ? item.figure6 : '',
                        })
                    })
                    console.log(this.tableList);
                }
            })
        },

        selectHandle(val) {
            console.log(val);
            this.selectArr = val
            this.selectNum = val.length
        },


        submitHandle() {
            if (this.selectArr.length == 0) {
                this.$message.warning('请选择要发送的用户')
                return
            }
            toSendSentence({
                classId: -1,
                content: JSON.stringify(this.selectArr),
                flag: 1,
            }).then(res => {
                if (res.flag) {
                    this.$message.success('发送成功')
                }
            })
        },

    },
    created: function () {
        this.getList()
    }
};
</script>

<style scoped>
.handleBtn {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.handleBtn>div {
    margin-left: 16px;
}

.handleBtn>div>span {
    font-size: 26px;
}
</style>
